<template>
  <div class="content">
    <div class="cloud-header">
      <h2>订单列表</h2>
    </div>
    <div class="cloud-body">
      {{ screen }}
      <!-- 订单筛选 -->
      <div class="orders-screen">
        <p><label>订单类型：</label><span><Button noBorder :text-color="screen.type == 'all'?'primary' :'default'" @click="intClick('type','all')">全部</Button><Button noBorder :text-color="screen.type == 'pre'?'primary' :'default'"  @click="intClick('type','pre')">预订单</Button></span></p>
<!--         <p>
          <label>下单日期：</label>
          <span>
            <Button noBorder :text-color="screen.time == 'two'?'primary' :'default'" @click="intClick('time','two')">近两日</Button>
            <Button v-if="screen.time != 'spe'" noBorder :text-color="screen.time == 'spe'?'primary' :'default'" @click="intClick('time','spe')">具体时间</Button>
            <DatePicker class="orders-date" v-model="screen.time_val" v-if="screen.time == 'spe'" :format="format" placeholder="具体时间"></DatePicker>
          </span>
        </p> -->
        <p>
          <label>下单日期：</label>
          <span>
              <Button noBorder :text-color="date == 'two'?'primary' :'default'" @click="setDate('two')">近两日</Button>
              <Button v-if="date != 'default'" noBorder :text-color="date == 'default'?'primary' :'default'" @click="setDate('default')">具体时间</Button>
              <DatePicker class="orders-date" v-model="screen.time" v-if="date == 'default'" :format="format" placeholder="具体时间"></DatePicker>
          </span>
        </p>
        <p><label>订单状态：</label><span><Button noBorder :text-color="screen.status == 'all'?'primary' :'default'" @click="intClick('status','all')">全部</Button><Button noBorder :text-color="screen.status == 'going'?'primary' :'default'" @click="intClick('status','going')">进行中</Button><Button noBorder :text-color="screen.status == 'end'?'primary' :'default'" @click="intClick('status','end')">已核销</Button></span></p>
      </div>

      <div class="list-header">
        <div class="list-header-item goods-cell">商品/门店</div>
        <div class="list-header-item price-cell">单价(元) / 数量</div>
        <div class="list-header-item aftermarket-cell">售后</div>
        <div class="list-header-item customer-cell">买家 / 收货人</div>
        <div class="list-header-item express-cell">配送/消费(方式)</div>
        <div class="list-header-item pay-price-cell">实收金额(元)</div>
        <div class="list-header-item state-cell">订单状态</div>
        <div class="list-header-item operation-cell">操作</div>
      </div>
      <div>
        <div class="list-item" v-for="(item, index) in datas" :key="index">
          <div class="zent-loading zent-loading--block zent-loading--has-children" data-zv="8.5.0" style="height: initial;">
            <div class="list-item-header">
              <div class="list-item-header-row">
                <div>
                  <span>订单号：{{item.order_sn}}</span>
                  <span>&nbsp;&nbsp;下单时间：{{item.creation_time}}</span>
                  <!-- 支付方式 -->
                  <span>&nbsp;&nbsp;{{item.order_remark}}</span>
                </div>
                <div class="operation-btn">
                  <a href="">查看详情</a>
                  <a href="">&nbsp;&nbsp;备注</a>
                </div>
              </div>
            </div>
            <table class="list-item-body-table">
              <tbody class="list-item-body">
                <tr class="list-item-row">
                  <td class="goods-cell">
                    <div class="goods-item-cell">
                      <img class="goods-info__img" :src="item.seller_info.photo" alt="">
                      <div class="goods-info__info">
                        <div class="goods-title">
                          <a href="#" target="_blank">
                            {{item.seller_info.name}}
                          </a>
                        </div>
                        <div class="goods-skus">
                          <span class="goods-sku"></span>
                        </div>
                        <div class="goods-tags">
                        </div>
                      </div>
                      <div class="goods-info__price">
                        <!-- 产品单价/数量 -->
                        <div></div>
                        <div></div>
                      </div>
                    </div>
                  </td>
                  <td class="aftermarket-cell" rowspan="1">
                    <div class="aftermarket">-</div>
                  </td>
                  <td class="customer-cell" rowspan="1">
                    <div>
                      <!-- 买家昵称 -->
                      <p class="user-name"> {{item.buyer_info.nickname}}</p>
                      <!-- 买家电话 -->
                      <p> {{item.buyer_info.mobile}}</p>
                    </div>
                  </td>
                  <td class="express-cell" rowspan="1">门店消费</td>
                  <td class="pay-price-cell" rowspan="1">
                    <div><span>{{item.amount_payment}}</span></div>
                  </td>
                  <td rowspan="1" class="state-cell">
                    <div class="order-state">
                      <div>
                        <p>交易关闭</p>
                      </div>
                    </div>
                  </td>
                  <td rowspan="1" class="operation-cell">
                    <div class="operation-cell__wrap">
                      <div class="option-wrap">操作</div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import date from '@/utils/datetime'
// import empty from './empty.vue'
export default {
  components: {
    // empty
  },
  data() {
    return {
      value:1,
      loading: false,
      datas: [],
      date:'two',
      screen:{
        type:'all',
        time:date.getDate(),
        status:'all',
      },
      format:'YYYY-MM-DD',
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    date(val,old){
      if(val == 'two'){
        let end_time = date.getDate();
        let start_time = date.getAfter(end_time,2);
        this.screen['time'] = ['>',start_time,'<',end_time];
      }
    }
    // "":{
    //   handler(val,old){
    //     if(val.time == 'two'){
    //         let end_time = date.getDate();
    //         let start_time = date.getAfter(end_time,2);
    //         val['time_val'] = ['>',start_time,'<',end_time];
    //     }
    //   },
    //   deep:true
    // }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.initialize();

    /**
     * 默认值是近两日，区间值
     * @type {[type]}
     */
    let end_time = date.getDate();
    let start_time = date.getAfter(end_time,2);
    this.screen['time'] = ['>',start_time,'<',end_time];

  },
  methods: {
    initialize() {
      let userInfo = this.$cloud.userInfo();
      console.log('用户信息',userInfo);
      this.$cloud.orders().lists({ '_uniqueid': userInfo._uniqueid }).then(data => {
        console.log('订单',data)
        this.datas = data;
      }).catch(error => {

      });
    },

    //
    setDate(data){
      if(data == 'default'){
        this.screen['time'] = '';
      }
      this.date = data;
    },

    /**
     * 点击事件
     * @return {[type]} [description]
     */
    intClick(params,value){
      this.screen[params] = value;
      console.log('点击事件',[params,value])
      console.log('筛选数据',this.screen);
    }
  }
};

</script>
<style lang="less" scoped="true">
.list-header {
  font-weight: 500;
  display: -ms-flexbox;
  display: flex;
  background-color: #f7f8fa;
  border-radius: 1px;
  margin-bottom: 16px;
  margin-top: 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  color: #323233;
}

.list-header .goods-cell {
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: left;
}

.list-header .price-cell {
  width: 10%;
  text-align: right;
}

.list-header .aftermarket-cell {
  width: 10%;
}

.list-header .customer-cell {
  width: 10%;
  min-width: 105px;
  word-break: break-all;
}

.list-header .express-cell,
.list-header .pay-price-cell,
.list-header .state-cell {
  width: 10%;
}

.list-header .operation-cell {
  width: 10%;
  text-align: right;
}

.list-header .list-header-item {
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.list-item {
  margin: 16px 0;
}

.zent-loading--block {
  position: relative;
}

.list-item-header {
  background-color: #f7f8fa;
  border: 1px solid #ebedf0;
  border-bottom: 0;
  padding: 16px;
  color: #323233;
}

.list-item-header div {
  display: inline-block;
}

.list-item-header .list-item-header-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.list-item-header .operation-btn {
  word-break: keep-all;
}

.list-item-body-table {
  width: 100%;
  border-collapse: collapse;
  color: #323233;
}

.list-item-body,
.list-item-body .list-item-row {
  width: 100%;
}

.list-item-body,
.list-item-body .list-item-row {
  width: 100%;
}

.list-item-body .goods-cell {
  width: 40%;
  padding: 10px;
}

.list-item-body-table td {
  border: 1px solid #ebedf0;
  box-sizing: border-box;
  width: 10%;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
}

.list-item-body .goods-item-cell {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.list-item-body .goods-item-cell .goods-info__img {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  min-width: 60px;
  margin-right: 10px;
  position: relative;
}

img::before {
  position: absolute;
  display: block;
  content: '';
  top: -7px;
  left: -7px;
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  background-color: #e6e6e6;
  border: 2px dotted #c8c8c8;
  border-radius: 5px;
}

img::after {
  position: absolute;
  display: block;
  content: '(>_<)';
  top: 50%;
  left: 50%;
  margin-top: -.5em;
  margin-left: -1.5em;
  height: 1em;
  line-height: 1em;
  width: 3em;
  color: #646464;
  text-align: center;
}

.list-item-body .goods-item-cell .goods-info__info {
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: left;
}

.list-item-body .goods-item-cell .goods-info__info .goods-title {
  margin-bottom: 10px;
  word-break: break-all;
}

.list-item-body .goods-item-cell .goods-info__info .goods-skus {
  margin-bottom: 4px;
}

.list-item-body .goods-item-cell .goods-info__price {
  min-width: 120px;
  text-align: right;
  box-sizing: border-box;
}

.list-item-body .aftermarket-cell {
  box-sizing: border-box;
  text-align: center;
  width: 10%;
}

.list-item-body .customer-cell {
  width: 10%;
  min-width: 105px;
  word-break: break-all;
}

.list-item-body .express-cell,
.list-item-body .pay-price-cell,
.list-item-body .state-cell {
  width: 10%;
}

.orders-screen{
  a{
    display: inline-block;
    margin:0 10px;
  }
  .orders-date,.orders-date .h-input input{
    color: #3788ee !important;
  }
}




</style>
